<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="120px"
    v-loading="formLoading"
    class="project_create"
    :inline="true"
  >
    <el-form-item label="姓名" prop="userName">
      <el-select
        v-model="formData.userName"
        filterable
        placeholder="请选择姓名"
        @change="chooseUser"
      >
        <el-option
          v-for="dict in data.userList"
          :key="dict.id"
          :label="dict.nickname"
          :value="{ value: dict.id, label: dict.nickname }"
        />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="职务" prop="projectName">
      <el-input v-model="formData.projectName" readonly style="width: 200px" />
    </el-form-item> -->
    <el-form-item label="部门" prop="deptName">
      <el-input v-model="formData.deptName" readonly style="width: 200px" />
    </el-form-item>
    <el-form-item label="请假类型" prop="type">
      <el-select v-model="formData.type">
        <el-option
          v-for="dict in data.leaveTypeList"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="休假信息" prop="reason">
      <el-input v-model="formData.reason" type="textarea" style="width: 200px" />
    </el-form-item>
    <!-- <el-form-item label="备注" prop="remark">
      <el-input v-model="formData.remark" type="textarea" style="width: 200px" />
    </el-form-item> -->
    <el-form-item label="调休日期" prop="leaveDay">
      <el-date-picker
        clearable
        v-model="formData.leaveDay"
        value-format="x"
        placeholder="请选择调休日期"
      />
    </el-form-item>
    <el-form-item label="请假开始时间" prop="startTime">
      <el-date-picker
        clearable
        v-model="formData.startTime"
        type="datetime"
        value-format="x"
        placeholder="请选择请假开始时间"
        @change="chooseTime"
      />
    </el-form-item>
    <el-form-item label="请假结束时间" prop="endTime">
      <el-date-picker
        clearable
        v-model="formData.endTime"
        type="datetime"
        value-format="x"
        placeholder="请选择请假结束时间"
        @change="chooseTime"
      />
    </el-form-item>
    <el-form-item label="工作承接人" prop="otherUserName">
      <el-select
        v-model="formData.otherUserName"
        @change="chooseOtherUser"
        placeholder="请选择工作承接人"
        clearable
      >
        <el-option
          v-for="dict in data.userList"
          :key="dict.id"
          :label="dict.nickname"
          :value="{ value: dict.id, label: dict.nickname }"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="工作内容" prop="workContent">
      <el-input v-model="formData.workContent" type="textarea" style="width: 200px" />
    </el-form-item>
    <el-form-item label="附件" prop="leaveUrl">
      <BasicUpload
        :maxSize="20"
        :maxNumber="10"
        :emptyHidePreview="true"
        @change="handleChange"
        :uploadParams="uploadParams"
        :api="uploadApi"
        class="my-5"
      />
    </el-form-item>
    <el-col :push="10">
      <el-form-item>
        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      </el-form-item>
    </el-col>
  </el-form>
</template>
<script lang="ts" setup>
  import { userSelect, getUser } from '/@/api/backs/system/user';
  import { useTagsViewStore } from '/@/store/modules/tagsView';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { ref, reactive, unref } from 'vue';
  import { addleave } from '/@/api/backs/workFlow/leave';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { getToken } from '/@/utils/auth';
  import { uploadApi } from '/@/api/sys/upload';
  import { BasicUpload } from '/@/components/Upload';
  const { closeCurrent } = useTabs();
  defineOptions({ name: 'BpmOALeaveCreate' });
  const uploadParams = ref({
    Authorization: 'Bearer ' + getToken(),
    // 'tenant-id': getTenantId(),
  });
  const data = reactive({
    userList: [],
    leaveTypeList: [
      {
        label: '年休假',
        value: '7',
      },
      {
        label: '病假',
        value: '1',
      },
      {
        label: '事假',
        value: '2',
      },
      {
        label: '调休',
        value: '4',
      },
      {
        label: '因公外出',
        value: '5',
      },
      {
        label: '因公受伤休假',
        value: '6',
      },
      {
        label: '婚假',
        value: '3',
      },
      {
        label: '丧假',
        value: '8',
      },
      {
        label: '产假',
        value: '9',
      },
      {
        label: '陪产假',
        value: '10',
      },
    ],
  });
  function handleChange(e) {
    formData.value.leaveUrl = e[0];
    message.success('操作成功！');
  }
  const chooseOtherUser = (e) => {
    formData.value.otherUserId = e.value;
    formData.value.otherUserName = e.label;
  };
  const chooseUser = async (e) => {
    formData.value.userId = e.value;
    formData.value.userName = e.label;
    const useInfo = await getUser({ id: e.value });
    console.log(useInfo);
    formData.value.deptName = useInfo.dept.name;
    formData.value.deptId = useInfo.dept.id;
  };
  userSelect({}).then((res) => {
    data.userList = res;
  });
  const { delView } = useTagsViewStore(); // 视图操作
  const { currentRoute } = useRouter(); // 路由
  const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  const formData = ref({
    userName: '',
    userId: 0,
    deptId: 0,
    deptName: '',
    leaveUrl: '',
    otherUserId: 0,
    otherUserName: '',
    workContent: '',
    days: 0,
    startTime: null,
    endTime: null,
    type: null,
    reason: '',
  });
  const formRules = reactive({
    type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
    reason: [{ required: true, message: '休假信息不能为空', trigger: 'blur' }],
    startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
    endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
    otherUserName: [{ required: true, message: '工作承接人不能为空', trigger: 'blur' }],
    workContent: [{ required: true, message: '工作内容不能为空', trigger: 'blur' }],
  });
  const chooseTime = () => {
    if (formData.value.startTime && formData.value.endTime) {
      if (formData.value.startTime >= formData.value.endTime) {
        message.error('结束时间不能小于等于开始时间！');
        formData.value.endTime = null;
      }
    }
  };
  const formRef = ref(); // 表单 Ref
  /** 提交表单 */
  const submitForm = async () => {
    // 校验表单
    if (!formRef.value) return;
    const valid = await formRef.value.validate();
    if (!valid) return;
    // 提交请求
    formLoading.value = true;
    try {
      const data = formData.value;
      // data.days = 2;
      // data.startDate = data.startDate * 1;
      // data.endDate = data.endDate * 1;
      await addleave(data);
      closeCurrent();
      message.success('发起成功');
      // 关闭当前 Tab
      delView(unref(currentRoute));
    } finally {
      formLoading.value = false;
    }
  };
</script>
<style lang="less">
  .project_create {
    padding: 16px;
    width: 50%;
    min-width: 800px;
  }
</style>
